<template>
  <el-dialog v-if="dialogFormVisible" title="编辑用户" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
    <el-form ref="ruleForm" :model="params" :rules="rules" label-width="6rem">
      <div class="base-info">
        <div class="icon-upload">
          <label><span>*</span> 头像：</label>
          <upload ref="upload" :limit="1" :file-list="fileList" :disabled="disabledEdit" :file-filter="filterImgType" :name-show="false" />
        </div>
        <div class="basics-info">
          <el-row>
            <el-col :span="24">
              <el-form-item label="登录账号：" prop="mobile">
                <div>
                  <el-input v-model="params.mobile" :disabled="disabledEdit" class="input-with-select" maxlength="11">
                    <el-select slot="prepend" v-model="phoneNum" style="width: 120px">
                      <el-option v-for="item in phoneList" :key="item.index" :value="item.value" :label="item.label" />
                    </el-select>
                  </el-input>
                  <span style="color: #909399;">使用手机号作为登录账号</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="name" label="用户姓名：">
                <el-input v-model="params.name" :disabled="disabledEdit" >
                  <el-button slot="append" icon="el-icon-search" @click="selectEmployeeDialog()" />
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="sex" label="性别：">
                <el-select v-model="params.sex" :disabled="disabledEdit" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.label" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="demoUser" label="演示账号：">
                <el-select v-model="params.demoUser" :disabled="disabledEdit" placeholder="请选择">
                  <el-option label="否" :value="0" />
                  <el-option label="是" :value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="用户昵称：">
                <el-input v-model="params.nickName" :disabled="disabledEdit" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系电话：">
                <el-input v-model="params.mobile" :disabled="disabledEdit" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="电子邮箱：">
                <el-input v-model="params.email" :disabled="disabledEdit" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button v-if="!disabledEdit" type="primary" @click="handleUser">确 定</el-button>
    </div>
    <ChooseEmployee :inner-visible="employeeSelectDialog" :check-ids="selEmployeeIds" multi-select="false" @getEmployeeInfoList="getEmployeeInfo" />
  </el-dialog>
</template>

<script>
import upload from '@/components/upload'
import ChooseEmployee from '@/components/choose-employee'
import valid from '@/utils/valid'
import { addUser, modifyUser, getUserById } from '@/api/user'
export default {
  components: {
    upload,
    ChooseEmployee
  },
  props: {
    parentId: {
      required: false,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      phoneNum: '0',
      phoneList: [
        {
          label: '中国 +86',
          value: '0'
        }
      ],
      options: [
        {
          label: '男',
          value: '1'
        },
        {
          label: '女',
          value: '2'
        }
      ],
      filterImgType: ['jpg', 'jpeg', 'png', 'icon', 'gif', 'bmp', 'JPG', 'JPEG', 'PNG', 'ICON', 'GIF', 'BMP'],
      fileList: [],
      selEmployeeIds:[],
      dialogFormVisible: false,
      employeeSelectDialog: false,
      disabledEdit: false,
      params: {
      },
      rules: {
        name: [{ required: true, message: '请填写用户姓名', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请填写登录账号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为11个数字', trigger: 'blur' },
          { validator: valid.mobile, trigger: 'blur' }
        ],
        sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
        demoUser: [{ required: true, message: '请选择演示账号', trigger: 'blur' }]
      }
    }
  },
  methods: {
    init(bool) {
      this.disabledEdit = bool
      this.fileList = []
      if (this.parentId) {
        getUserById(this.parentId).then(response => {
          this.params = response
          this.params.sex = this.params.sex + ''
          if (response.image) {
            this.fileList.push({
              url: response.image
            })
          }
          this.dialogFormVisible = true
        })
      } else {
        this.params = {}
        this.params.demoUser = 0
        this.dialogFormVisible = true
      }
    },
    handleUser() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.$refs.upload.key && this.$refs.upload.key.length > 0) {
            this.params.image = this.$refs.upload.key[0].urlName
          }
          if (this.parentId) {
            modifyUser(this.params).then(response => {
              this.$message.success('修改成功')
              this.$emit('refresh')
              this.dialogFormVisible = false
            })
          } else {
            addUser(this.params).then(response => {
              this.$message.success('添加成功')
              this.$emit('refresh')
              this.dialogFormVisible = false
            })
          }
        } else {
          return false
        }
      })
    },
    selectEmployeeDialog() {
      this.employeeSelectDialog = true
    },
    getEmployeeInfo(val) {
      this.pushGoodsList = val.goodsArr
      this.selEmployeeIds = val.rowIds
    },
  }
}
</script>

<style lang="scss">
.base-info {
  display: flex;
  margin-bottom: 20px;
  .icon-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20px;
    >label {
      margin-bottom: 10px;
      span {
        color: #ff4949;
      }
    }
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 5px;
      margin: 0 30px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 150px;
        line-height: 150px;
        text-align: center;
      }
    }
  }
  .basics-info {
    width: 100%;
  }
}
</style>
